:root,
:root.light {
  --button-hover-bg-color: #f3f3f3;
  --button-active-bg-color: #d3d3d3;
  --neutral-text-default: 26 27 29 / 1;
  --stroke: #4D5157;
}

:root.dark {
  --button-hover-bg-color: #5b5b5b;
  --button-active-bg-color: #8c8c8c;
  --neutral-text-default: 245 246 246 / 1;
  --stroke: #d2d2d2;
}

button.icon {
  stroke: var(--stroke);
  background-color: inherit;
  padding: 10px 10px 5px 10px;
  border: 1.3px solid #bcbcbc;
  border-radius: 10px;
}

button.icon:hover {
  background-color: var(--button-hover-bg-color)
}

button.icon:active {
  background-color: var(--button-active-bg-color)
}

.tooltip {
  width: 20%;
  min-width: 100px;
  max-width: 600px;
  max-height: 80%;
  position: absolute;
  z-index: 2147483647;
  right: 0;
  bottom: 0;
  background-color:var(--button-hover-bg-color);
  border: solid;
  border-color: #BBBEC3;
  border-width: 0.5px;
  padding: 0.8rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  margin-right: 0.5rem;
  filter: drop-shadow(0 4px 8px rgba(26,27,29,0.12));
  font-family: 'Public Sans', sans-serif;
  color: var(--neutral-text-default);
  font-size: 14px
}
